<template>
    <div class="phone-demo-box" @scroll="scroll">
        <div class="header">
            <div class="timer">下午 2：35</div>
            <div class="search"></div>
        </div>
        <div class="body">
            <slot></slot>
            <!-- 精选
            <model1/>
            轮播+游戏信息
            <model2/>
            任务
            <model3/>
            icon陈列表
            <model4/>
            banner
            <model5/>
            专属定制
            <model6/>
            banner+游戏信息
            <model7/>
            banner+标题
            <model8/>
            轮播+标题
            <model9/>
            列表
            <model10/> -->
        </div>
    </div>
</template>

<script>
export default {
    name: 'phone',
    mounted () {
        this.$el.scrollTop = this.scrollTop || 0
    },
    props: ['scrollTop'],
    methods: {
        scroll (e) {
            let scrollTop = e.target.scrollTop
            this.$emit('scroll', scrollTop)
        }
    },
    watch: {
        scrollTop (val) {
            this.$el.scrollTop = this.scrollTop || 0
        }
    }
}
</script>

<style lang="scss">
    .phone-demo-box {
        width: 362px;
        height: 640px;
        font-size: 12px;
        overflow-y: auto;
        border: 1px solid #000000;
        .header {
            background-color: #3C425D;
            height: 92px;
            .timer {
                padding: 3px 0;
                text-align: center;
                color: #ffffff;
            }
            .search {
                background:rgba(255,255,255,1);
                border-radius:4px;
                opacity:0.08;
                margin: 0 auto;
                width: 328px;
                height: 30px;
            }
        }
        .body {
            background:rgba(255,255,255,1);
            border-radius:16px 16px 0px 0px;
            padding-bottom: 20px;
            margin-top: -20px;
            // > div {
            //     border-bottom: 1px solid rgba(228,228,228,1);
            // }
        }
    }
    // background-color:rgb(246, 197, 68);
</style>
